<script setup>
import { NavBar, Tab, Tabs, Button, Popup,Toast,Image } from 'vant';

import {ref} from 'vue';
import router from '@/router';
import { reactive } from 'vue';
import http from '@/http';
const systemCurxList = ref([])
const textareaMoren = ref('')
const storeId = ref(JSON.parse(localStorage.getItem('shop')).shopDescription)
const listA = reactive([])
const listB = reactive([
    {
        curx:[],
        recover:'',
    }
])
const showBottom = ref(false)
const show = ref(false)

const getSysCurxList = async() => {
    const res = await http.post('/selectAllBDGJZ',{storeId:storeId.value})
    console.log(res);
    systemCurxList.value = res.data
}
getSysCurxList()

const getList = async() => {
    const res = await http.post(`/selectAllZDH/${storeId.value}`)
    console.log(res);
    listA.splice(0,listA.length)
    res.data.forEach(e=>{
        listA.push(e)
    })
    console.log(listA);
    listA.forEach(e=>e.gjz = e.gjz.split(','))
}
getList()

/**
 * 返回
 *
 * @returns 无返回值
 */
const onClickLeft = () => {
    router.back()
}


const save = () => {
    console.log(listA);
    const arr = listA.filter(e=>!e.id)
    try {
        arr.forEach(async(e)=>{
            if(!e.gjz.length)return
            const res = await http.post('/saveZDHJL',{
                plhs:e.plhs,
                gjz:e.gjz.join(','),
                storeId:storeId.value,
                state:1
            })
        })
        Toast.success('保存成功')
    } catch (error) {
        Toast.fail('保存失败')
    }
    router.back()
}

const activeTab = ref('a') // 当前激活的标签页 a评论话术 b截流话术
/**
 * 点击标签页时触发的方法
 *
 * @returns 无返回值
 */
const onClickTab = () => {
    console.log(activeTab.value);
}
/**
 * 选择系统关键字
 *
 * @param item 当前选项
 * @returns 无返回值
 */
const chooseSystemCurx = async(item) => {
    if(listA[cusIndex.value].gjz.includes(item)){
        listA[cusIndex.value].gjz = listA[cusIndex.value].gjz.filter(e => e !== item)
     }else{
        listA[cusIndex.value].gjz.push(item)
    }
    if(listA[cusIndex.value].id){
        const res = await http.post('updateZDHJL',{
            state:1,
            gjz:listA[cusIndex.value].gjz.join(','),
            plhs:listA[cusIndex.value].plhs,
            id:listA[cusIndex.value].id,
            storeId:storeId.value
        })
    }
    
}

/**
 * 新增话术
 *
 * @returns 无返回值
 */
const addTrick = () => {
        listA.push({
            gjz:[],
            plhs:''
        })
}

const userTextarea = ref('')
const cusIndex = ref(0) //list的索引
/**
 * 打开自定义关键字弹窗
 *
 * @param i 光标位置索引
 * @returns 无返回值
 */
const addCusCurx = (i) => {
    show.value = true
    cusIndex.value = i
    userTextarea.value = ''
}
/**
 * 打开系统关键字弹窗
 *
 * @param i 当前索引值
 * @returns 无返回值
 */
const addSystemCurx = (i) => {
    showBottom.value = true
    cusIndex.value = i
}

/**
 * 自定义关键字取消
 *
 * @returns 无返回值
 */
const cencel = () => {
    show.value = false
}

/**
 * 自定义关键字确定
 *
 * @returns 无返回值
 */
const verify = async() => {
    listA[cusIndex.value].gjz.push(userTextarea.value)
    if(listA[cusIndex.value].id){
        const res = await http.post('updateZDHJL',{
            state:1,
            gjz:listA[cusIndex.value].gjz.join(','),
            plhs:listA[cusIndex.value].plhs,
            id:listA[cusIndex.value].id,
            storeId:storeId.value
        })
    }
    Toast('添加成功')
    show.value = false
}

// 删除关键字
const delCurx = async(index,i) => {
    listA[index].gjz.splice(i,1)
    if(listA[index].id){
        const res = await http.post('updateZDHJL',{
            state:1,
            gjz:listA[index].gjz.join(','),
            plhs:listA[index].plhs,
            id:listA[index].id,
            storeId:storeId.value
        })
    }
}


const delHs = async(id,index) => {
    if(!id){
        listA.splice(index,1)
        Toast.success('删除成功')
    }else{
        const res = await http.post(`/removePLHS/${id}`)
        getList()
        Toast.success('删除成功')
    }
    
}

const blurTextarea = async(index) => {
    if(listA[index].id){
        const res = await http.post('updateZDHJL',{
            state:1,
            gjz:listA[index].gjz.join(','),
            plhs:listA[index].plhs,
            id:listA[index].id,
            storeId:storeId.value
        })
    }
}

const getMR = async() => {
    const res = await http.post(`selectMRHS/${storeId.value}`)
    textareaMoren.value = res.data.plhs
}
getMR()

const editMR = async() => {
    const res = await http.post('updateMRHS',{
        plhs:!textareaMoren.value.trim()?null:textareaMoren.value,
        storeId:storeId.value
    })
}
</script>

<template>
    <div class="page">
        <NavBar
        style="height: 15vw;"
          title="智能回复"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          safe-area-inset-top
          clickable
        />
            <div>
                <div class="moren">
                <div class="moren-title">
                    <div class="moren-mark">1</div>
                    <span>默认话术</span>
                </div>
                <p class="moren-tip">非关键字的评论将回复默认话术，不设置将不回复</p>
                <textarea class="moren-textarea" @blur="editMR" v-model="textareaMoren" placeholder="输入话术内容"></textarea>
                </div>
                <div class="crux" v-for="item,index in listA" :key="index">
                <div class="crux-title">
                    <div class="moren-mark">{{index + 2}}</div>
                    <span @click="delHs(item.id,index)">删除</span>
                </div>
                <div class="curx-text">
                    <div class="curx-set">
                        <span>关键字</span>
                        <div class="curx-tag" @click="addSystemCurx(index)">
                            <Image class="curx-tag-image" :src="require('../../assets/img/home_icon_jhaoh.png')"/>
                            <span>系统关键字</span>
                        </div>
                        <div class="curx-tag-cus" @click="addCusCurx(index)">
                            <Image class="curx-tag-cus-image" :src="require('../../assets/img/home_gjzi_icon_zhaol.png')"/>
                            <span>自定义关键字</span>
                        </div>
                    </div>
                    <div class="curx-items">
                        <li v-for="e,i in item.gjz" :key="i">
                            <div class="curx-item">
                                <span>{{ e }}</span>
                                <Image class="curx-item-image" @click="delCurx(index,i)" :src="require('../../assets/img/home_icon_gbi.png')"/>
                            </div>
                        </li>
                    </div>
                </div>
                <div class="curx-mine">
                    <h5>我的回复</h5>
                    <textarea class="curx-mine-textarea" @blur="blurTextarea(index)" v-model="item.plhs" placeholder="输入话术内容"></textarea>
                </div>
                </div>
        <div class="btns">
            <Button class="btn-add" @click="addTrick">新增话术</Button>
            <Button class="btn-vis" @click="save">确定</Button>
        </div>
        
            </div>
    </div>
    <Popup
        v-model:show="showBottom"
        round
        closeable
        close-icon="cross"
        position="bottom"
        >
        <div class="popup">
            <div class="popup-top">
                系统关键字
            </div>
            <div class="popup-content">
                <div 
                v-for="item,index in systemCurxList" 
                :key="index" 
                :class="listA[cusIndex].gjz.includes(item.gjz) ? 'popup-item-active' : 'popup-item'" 
                @click="chooseSystemCurx(item.gjz)"
                class="popup-item">{{item.gjz}}</div>
            </div>
            <div class="popup-bottom">
                <Button class="btn-choose" @click="showBottom = !showBottom">确定选择({{ activeTab==='a'?listA[cusIndex].gjz.length:listB[cusIndex].gjz.length }})</Button>
            </div>
        </div>
    </Popup>
    <Popup 
        v-model:show="show" 
        round
        position="center">
          <div>
            <textarea v-model="userTextarea" class="dialog-textarea" placeholder="输入关键字"></textarea>
            <div class="popup-content-bottom">
                <div class="cencel" @click="cencel">取消</div>
                <div class="verify" @click="verify">确认</div>
            </div>
          </div>
    </Popup>
</template>

<style scoped>
::v-deep .van-nav-bar__content{
    height: 100%;
}
.page{
    position: relative;
    background-color: #f5f7fa;
    padding-bottom: 22vw;
}
.moren{
    height: 53vw;
    background-color: #fff;
    border-radius: 2vw;
    margin: 3vw;
    padding: 5vw 4vw;
    box-sizing: border-box;
}
.moren-title{
    display: flex;
    align-items: center;
    font-size: 4.27vw;
    color: rgb(48,49,51);
    margin-bottom: 4vw;
}
.moren-mark{
    width: 5vw;
    height: 5vw;
    border-radius: 1vw;
    background-color: #303133;
    color: #fff;
    text-align: center;
    line-height: 5vw;
    font-size: 3.2vw;
    margin-right: 3vw;
}
.moren-tip{
    font-size: 3.2vw;
    color:rgb(255,66,66);
    margin-bottom: 2vw;
}
.moren-textarea{
    width: 85vw;
    height: 25vw;
    border: none;
    padding: 4vw;
    background-color: #f5f7fa;
    border-radius: 1.07vw;
    box-sizing: border-box
}
.crux{
    background-color: #fff;
    border-radius: 2vw;
    margin: 3vw;
    padding: 5vw 4vw;
    box-sizing: border-box;
}
.crux-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.73vw;
    color: rgb(255,66,66);
}
.curx-text{
    margin: 5vw 0;
}
.curx-set{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 4.27vw;
    color: rgb(48,49,51);
}
.curx-tag{
    width: 34vw;
    height: 9vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2vw 0 3vw;
    background-color: rgba(230,162,60,0.1);
    color: rgb(230,162,60);
    font-size: 3.73vw;
    border-radius: 48.53vw;
}
.curx-tag-image{
    width: 6vw;
    height: 6vw;
}
.curx-tag-cus{
    width: 34vw;
    height: 9vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(142,84,244,0.1);
    color: rgb(142,84,244);
    font-size: 3.73vw;
    border-radius: 48.53vw;
}
.curx-tag-cus-image{
    width: 6vw;
    height: 6vw;
}
.curx-item{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7.47vw;
    font-size: 3.73vw;
    color: rgb(48,49,51);
    border-radius: 29.33vw;
    background-color: rgb(245,247,250);
    padding: 1vw 2vw;
    box-sizing: border-box;
    margin: 0 4vw 4vw 0;
}
.curx-item:nth-child(3n){
    margin: 0;
}
.curx-item-image{
    display: inline-block;
    width: 6vw;
    height: 6vw;
}
.curx-items li{
    display: inline-block;
}
.curx-items{
    margin: 4vw 0;
}
.curx-mine h5{
    font-size: 3.73vw;
    font-weight: 400;
    color: rgb(48,49,51);
    margin-bottom: 4vw;
}
.curx-mine-textarea{
    width: 85vw;
    height: 32vw;
    border-radius: 1.07vw;
    padding: 4vw;
    background-color: rgb(245,247,250);
    border: none;
    box-sizing: border-box;
}
.btns{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 22vw;
    background-color: #fff;
    padding-top: 1vw;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    
}
.btn-add{
    width: 44vw;
    height: 12vw;
    color: rgb(142,84,244);
    border: 0.27vw solid rgb(142,84,244);
    border-radius: 26.67vw;
    background-color: #fff;
    font-size: 4.27vw;
    margin-right: 4vw;
}
.btn-vis{
    width: 44vw;
    height: 12vw;
    color: #fff;
    border-radius: 26.67vw;
    background-color: rgb(142,84,244);
    font-size: 4.27vw;
}
.popup{
    position: relative;
    width: 100%;
    height: 160vw;
}
.popup-top{
    width: 100%;
    height: 15vw;
    text-align: center;
    line-height: 15vw;
    font-size: 4.27vw;
    font-weight: 500;
    border-bottom: 1px solid rgb(220,223,230);
}
.popup-content{
    padding: 4vw;
    box-sizing: border-box;
}
.popup-item{
    display: inline-block;
    padding: 1.33vw 4.27vw;
    background-color: rgb(245,247,250);
    margin: 0 3vw 3vw 0;
    border: 1px solid transparent;
    border-radius: 27.2vw;
}
.popup-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 22vw;
    background-color: #fff;
    padding-top: 1vw;
}
.btn-choose{
    width: 91vw;
    height: 12vw;
    background-color: rgb(142,84,244);
    color: #fff;
    font-size: 4.27vw;
    border-radius: 26.67vw;
}
.popup-item-active{
    background-color: rgba(142,84,244,0.1) !important;
    color: rgb(142,84,244) !important;
    border: 1px solid rgb(142,84,244) !important;
}
.dialog-textarea{
        width: 71vw;
        height: 25vw;
        border-radius: 1vw;
        margin: 4vw;
        background-color: rgb(245,247,250);
        padding: 3vw 4vw;
        font-size: 4.27vw;
        border: none;
    }
    .popup-content-bottom{
        display: flex;
        width: 100%;
        height: 15vw;
        border-top: 1px solid rgb(235,238,245);
    }
    .cencel{
        flex: 1;
        text-align: center;
        height: 100%;
        line-height: 15vw;
        color: rgb(144,147,153);
        font-size: 4.53vw;
    }
    .verify{
        flex: 1;
        text-align: center;
        height: 100%;
        line-height: 15vw;
        color: rgb(142,84,244);
        font-size: 4.53vw;
        border-left: 1px solid rgb(235,238,245);
    }
    *{
      user-select: none;
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+/Edge */
    }
    input {
      -webkit-user-select:auto; /*webkit浏览器*/
    }
</style>